<template>
	<view>
		<!-- 用户基本信息 -->
		<view class="user-info">
			<view style="height:150upx"></view>
			<image class="user-header" :src="info.img"></image>
			<view class="user-infos">
				<view class="user-nick">{{info.nickname}}</view>
				<view class="user-no">no：{{info.username}}</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order">
			<view @click="toOrder(0)">
				<i class="icon">&#xe615;</i>
				<view class="order-title">待付款</view>
			</view>
			<view @click="toOrder(1)">
				<i class="icon">&#xe622;</i>
				<view class="order-title">待发货</view>
			</view>
			<view @click="toOrder(2)">
				<i class="icon">&#xe68e;</i>
				<view class="order-title">待收货</view>
			</view>
			<view @click="toOrder(3)">
				<i class="icon">&#xe60c;</i>
				<view class="order-title">已完成</view>
			</view>
		</view>
		<!-- 钱包资金 -->
		<view class="wallet" @tap="toPage(2)">
			<view class="wallet-item">
				<view class="wallet-num">{{info.regmoney}}</view>
				<view class="order-title">投资金额</view>
			</view>
			<view class="wallet-item">
				<view class="wallet-num">{{info.priceall}}</view>
				<view class="order-title">总资产</view>
			</view>
			<view class="wallet-item">
				<view class="wallet-num">{{info.yprice}}</view>
				<view class="order-title">净资产</view>
			</view>
			<view class="wallet-item">
				<view class="wallet-num">{{info.jifen}}</view>
				<view class="order-title">资产</view>
			</view>
			<view class="wallet-item">
				<image src="../../static/wallet.png" class="wallet-img" mode="widthFix"></image>
			</view>
		</view>
		<!-- 功能菜单 -->
		<view>
			<view class="menus">
				<view class="menu-item">
					<i class="icon" style="color:#F7311B">&#xe60d;</i>
					<view class="order-title">我的关注</view>
				</view>
				<view class="menu-item" @tap="toPage(4)">
					<i class="icon" style="color:#F4A908">&#xe62a;</i>
					<view class="order-title">我的分享</view>
				</view>
				<view class="menu-item" @tap="toPage(5)">
					<i class="icon" style="color:#088AF4">&#xe748;</i>
					<view class="order-title">二维码</view>
				</view>
				<view class="menu-item">
					<i class="icon" style="color:#F4A908">&#xe61d;</i>
					<view class="order-title">我的足迹</view>
				</view>
				<view class="menu-item" @tap="toPage(6)">
					<i class="icon" style="color:#F40847">&#xe600;</i>
					<view class="order-title">购物车</view>
				</view>
				<view class="menu-item" @click="toOrder(0)">
					<i class="icon" style="color:#F4A908">&#xe611;</i>
					<view class="order-title">我的订单</view>
				</view>
				<view class="menu-item">
					<i class="icon" style="color:#088AF4">&#xe628;</i>
					<view class="order-title">地址管理</view>
				</view>
				<view class="menu-item" @tap="toPage(7)">
					<i class="icon" style="color:#F4A908">&#xe61e;</i>
					<view class="order-title">关于我们</view>
				</view>
			</view>
		</view>
		
		<!-- 我的卡片 -->
		<view>
			<view class="card-item">
				<view class="card-header"><i class="icon">&#xe601;</i>每日资产释放到账</view>
				<view class="card-content">
					<view>
						<view class="card-num">{{list.jfMeiri}}</view>
						<view class="card-title">释放量</view>
					</view>
					<view>
						<view class="card-num">{{list.jfZong}}</view>
						<view class="card-title">待释放</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的卡片 -->
		<view>
			<view class="card-item">
				<view class="card-header"><i class="icon">&#xe601;</i>每日净资产释放到账</view>
				<view class="card-content">
					<view>
						<view class="card-num">{{list.yueMeiri}}</view>
						<view class="card-title">释放量</view>
					</view>
					<view>
						<view class="card-num">{{list.yueZong}}</view>
						<view class="card-title">待释放</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height:20upx"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{},
				list:{}
			}
		},
		onLoad() {
			this.getData();
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			uni.navigateTo({
				url:'../setting/index'
			})
		},
		methods:{
			//页面加载数据
			getData(){
				this.ajax('user/index',{
					data:{},
					success:(res) => {
						res = res.data;
						this.info = res.info.info;
						this.list = res.info.list;
						console.log(JSON.stringify(res));
					}
				});
			},
			toPage(way){
				var url = '';
				switch (way){
					case 2:
						url = "../distruction/index";
						break;
					case 4:
						url = "../share/index";
						break;
					case 5:
						url = "../share/qrcode";
						break;
					case 6:
						url = "../cart/index";
						uni.switchTab({
							url:url
						})
						return true;
						break;
					case 7:
						url = "../about/index";
						break;
					default:
						break;
				}
				uni.navigateTo({
					url:url
				})
			},
			//跳转订单页
			toOrder(state){
				uni.navigateTo({
					url : '../order/index?state='+state
				})
			}
		}
	}
</script>

<style>
	.user-info{background-color: #409EFF;height:400upx}
	.user-header{float: left;width:120upx;height: 120upx;border-radius: 50%;border:5upx solid #ffffff;margin:50upx 0 0 75upx;}
	.user-infos{float: left;width:calc(100% - 240upx);height:120upx;margin: 50upx 0 0 30upx;color:#eee;}
	.user-no{margin-top:20upx;font-size: 30upx;}
	.order,.wallet{height:140upx;color:#444;width:calc(100% - 40upx);margin:20upx;background-color: #FFFFFF;border-radius: 10upx;}
	.order > view,.wallet > view{float: left;width:25%;text-align: center;font-size: 30upx;}
	.wallet > view{width: 20%;}
	.order .icon{font-size: 50upx;margin-top:20upx;color:#F17806;}
	.order-title{margin-top:10upx;font-size: 25upx;}
	.wallet-img{width: 70%;display: block;clear: both;margin:15% auto;}
	.wallet-item > view{height:70upx;}
	.wallet-item .order-title{color:#666666;font-size: 23upx;}
	.wallet-num{font-weight: 800;line-height: 90upx;}
	.menus,.card-item{width:calc(100% - 80upx);padding:20upx;background: #FFFFFF;border-radius: 10upx;margin: auto;overflow: hidden;}
	.menu-item{width: 25%;height:140upx;text-align: center;float: left;}
	.menu-item .icon{font-size: 50upx;}
	.menu-item .order-title{font-size: 30upx;color:#777777;font-size: 25upx;}
	.card-item{margin-top:20px}
	.card-header{font-size: 30upx;padding-bottom: 10upx;border-bottom: 1px solid #EEEEEE;}
	.card-content > view{width: 50%;float: left;}
	.card-num{font-size: 60upx;color:#409EFF;margin: 30upx 0;}
	.card-title{font-size: 30upx;color:#666666}
	.card-header .icon{color:#F17806;font-size: 50upx;display: inline;margin-right: 10upx;}
</style>
